<template>
	<view class="give_record">
		<i-scrollList @more="more" height="100vh" :total="pageData.total" :pageTotal="pageList.length">
			<i-card top="20rpx" v-for="item in pageList" :key="item.userId">
				<view class="top_title">
					<text>{{vipLevel[item.vip] || '普通用户'}}</text>
					<text class="status">{{rechange_status_type[item.rechangeStatus]}}</text>
				</view>
				<view class="top_text">
					<text>受赠人：{{item.receiveUserName}}</text>
					<text>赠送优惠金：{{item.accountAmount}}</text>
				</view>
				<view class="top_bot">
					<text>赠送时间：{{item.payTime}}</text>
					<i-price>{{item.cashAmount}}</i-price>
				</view>
			</i-card>
			<view v-if="skeleton" v-for="item in 10" :key="item" style="margin-top: 20rpx;">
				<i-skeleton size="48rpx" border="1rpx solid #f3f4f5" 
				:icon="false" 
				:rowsW="['40%', '60%','60%','70%']" :rowsH="['32rpx', '24rpx', '24rpx','24rpx']" 
				height="220rpx" :rows="4">
				</i-skeleton>
			</view>
		</i-scrollList>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getGivingList
	} from '../../api/index';
import {
		vipLevel,
		rechange_status_type
	} from '../../utils/enums';
	const url = ref('')
	const skeleton = ref(true)
	
	const pageData = reactive({
		tyjPageNum: 1,
		tyjPageSize: 15,
		total: 0
	})
	const pageList = ref<GetGivingListRes['rows']>([])

	onLoad((option) => {
		url.value = option.url
	})
	
	const more = () => {
		pageData.tyjPageNum++
		getPageList()
	}

	const getPageList = async () => {
		const data = await getGivingList({
			tyjPageNum: pageData.tyjPageNum,
			tyjPageSize: pageData.tyjPageSize,
		})
		pageList.value = pageList.value.concat(data.rows)
		pageData.total = data.total
		skeleton.value = false
	}
	getPageList()
</script>

<style lang="scss" scoped>
	.give_record {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.top_title {
			@include flexRS;
			@include titlefont(28rpx);

			.status {
				@include dfont;
			}
		}

		.top_text {
			@include dfont(24rpx);
			@include flexC;
			color: #A0A0AD;

			text {
				margin-top: 8rpx;
			}
		}

		.top_bot {
			@include flexRS;
			@include dfont(24rpx);
			margin-top: 8rpx;
			color: #A0A0AD;
		}
	}
</style>
